import { ALL_CATEGORY_ITEM, CATEGORY_NOMAR_DATA } from '@/constants'
import { getCategory } from '@/api/category'
/**处理navigationBar 中的数据 categorys */
export default {
    /**
     * namespaced命名空间
        开启方式： 在独立的模块中添加配置项 namespaced: true
        带命名空间的模块，具有更高的封装度和复用性
        当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。
     */
    namespaced: true,
    state: () => {
        return {
            /**
             * 处理navgationbar 闪烁的问题
             * 1、让categorys 具备 一个初始化 数据
             * 2、从服务端获取数据，替换初始化数据
             * 3、为了防止初始化数据太老，我们把每次获取到的新数据，都作为下一次的初始化数据
             * 第三步实现：每次从接口得到的数据，进行缓存（缓存到localstore中）。在下次运行时，把缓存的数据作为初始值。
             */
            categorys: CATEGORY_NOMAR_DATA
        }
    },
    mutations: {
        /**
         * 为 categorys 赋值
         * @param {*} state
         * @param {*} categorys
         */
        setCategorys(state, newCategorys) {
            state.categorys = [ALL_CATEGORY_ITEM, ...newCategorys]
        }
    },
    actions: {
        /**
         * 获取 category 数据，并自动保存到 vuex 中
         * @param {*} context
         */
        async useCategoryData(context) {
            const { categorys } = await getCategory()
            context.commit('setCategorys', categorys)
        }
    }
}
